<template>
  <div class="favorites-container">
    <div class="page-header">
      <h2 class="page-title">我的收藏</h2>
      <div class="header-right">
        <a-space>
          <a-select 
            v-model="queryParams.subjectType" 
            style="width: 100px"
            placeholder="题目类型"
            allowClear
          >
            <a-select-option value="1">简答题</a-select-option>
            <a-select-option value="2">选择题</a-select-option>
          </a-select>
          <a-tree-select
            v-model="queryParams.categoryId"
            style="width: 200px"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="categoryTreeData"
            placeholder="选择分类"
            tree-default-expand-all
            :replaceFields="{
              children: 'children',
              title: 'categoryName',
              key: 'id',
              value: 'id'
            }"
            allow-clear
          />
          <a-select
            v-model="queryParams.subjectLevel"
            style="width: 100px"
            placeholder="难度"
            allowClear
          >
            <a-select-option 
              v-for="level in levelList" 
              :key="level.code" 
              :value="level.code"
            >
              {{ level.desc }}
            </a-select-option>
          </a-select>
        </a-space>
      </div>
    </div>

    <div class="content-list">
      <a-list 
        :data-source="favoritesList"
        :loading="loading"
        :pagination="pagination"
      >
        <a-list-item slot="renderItem" slot-scope="item">
          <div class="favorite-card" @click="goToDetail(item.subjectId)">
            <div class="card-header">
              <div class="problem-info">
                <h3 class="problem-title">{{ item.subjectName }}</h3>
                <div class="problem-tags">
                  <a-tag color="blue">{{ item.categoryName }}</a-tag>
                  <a-tag :color="getTypeColor(item.subjectType)">{{ item.subjectTypeName }}</a-tag>
                  <a-tag :color="getLevelColor(item.subjectLevel)">{{ item.subjectLevelName }}</a-tag>
                </div>
              </div>
              <div class="collect-time">
                收藏于 {{ item.createTime }}
              </div>
            </div>
          </div>
        </a-list-item>
      </a-list>
    </div>
  </div>
</template>

<script>
import { request } from '@/utils/request'

export default {
  name: 'Favorites',
  data() {
    return {
      loading: false,
      favoritesList: [],
      categoryTreeData: [],
      levelList: [],
      queryParams: {
        categoryId: undefined,
        subjectType: undefined,
        subjectLevel: undefined,
        page: 1,
        pageSize: 10
      },
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.handlePageChange,
        onShowSizeChange: this.handleSizeChange,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '50']
      }
    }
  },
  created() {
    this.fetchCategories()
    this.fetchLevels()
    this.fetchFavorites()
  },
  watch: {
    'queryParams.categoryId'() {
      this.handleSearch()
    },
    'queryParams.subjectType'() {
      this.handleSearch()
    },
    'queryParams.subjectLevel'() {
      this.handleSearch()
    }
  },
  methods: {
    async fetchCategories() {
      try {
        const res = await request.post('/subject/category/queryList', { id: '0' })
        if (res.code === 200) {
          this.categoryTreeData = res.content
        } else {
          this.$message.error(res.message || '获取分类列表失败')
        }
      } catch (error) {
        this.$message.error('获取分类列表失败')
      }
    },
    async fetchLevels() {
      try {
        const res = await request.get('/subject/level/queryList')
        if (res.code === 200) {
          this.levelList = res.content
        } else {
          this.$message.error(res.message || '获取难度列表失败')
        }
      } catch (error) {
        this.$message.error('获取难度列表失败')
      }
    },
    async fetchFavorites() {
      this.loading = true
      try {
        const res = await request.post('/subject/collect/queryPage', this.queryParams)
        if (res.code === 200) {
          this.favoritesList = res.content.list
          this.pagination.total = parseInt(res.content.total)
        } else {
          this.$message.error(res.message || '获取收藏列表失败')
        }
      } catch (error) {
        this.$message.error('获取收藏列表失败')
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.queryParams.page = 1
      this.fetchFavorites()
    },
    handlePageChange(page, pageSize) {
      this.queryParams.page = page
      this.queryParams.pageSize = pageSize
      this.fetchFavorites()
    },
    handleSizeChange(current, size) {
      this.queryParams.page = 1
      this.queryParams.pageSize = size
      this.fetchFavorites()
    },
    goToDetail(id) {
      this.$router.push(`/practice/${id}`)
    },
    getTypeColor(type) {
      return type === '1' ? 'cyan' : 'purple'
    },
    getLevelColor(level) {
      const colors = {
        '0': 'green',
        '1': 'cyan',
        '2': 'blue',
        '3': 'purple',
        '4': 'red'
      }
      return colors[level] || 'blue'
    }
  }
}
</script>

<style scoped>
.favorites-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  min-height: calc(100vh - 64px);
  background: #f8fafc;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  background: white;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.content-list {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.favorite-card {
  width: 100%;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
}

.favorite-card:hover {
  background: #fafafa;
  border-color: #d9d9d9;
  transform: translateY(-1px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.problem-info {
  flex: 1;
}

.problem-title {
  font-size: 16px;
  font-weight: 500;
  color: #1f2937;
  margin: 0 0 12px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.favorite-card:hover .problem-title {
  color: #1890ff;
}

.problem-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.problem-tags :deep(.ant-tag) {
  margin: 0;
  padding: 2px 8px;
  border: none;
  font-size: 13px;
}

.collect-time {
  color: #6b7280;
  font-size: 13px;
  white-space: nowrap;
  margin-left: 16px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .favorites-container {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    padding: 16px;
  }

  .header-right :deep(.ant-space) {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  
  .header-right :deep(.ant-select) {
    width: calc(50% - 4px) !important;
  }

  .content-list {
    padding: 12px;
  }

  .favorite-card {
    padding: 12px;
  }

  .card-header {
    flex-direction: column;
    gap: 8px;
  }

  .collect-time {
    margin-left: 0;
  }

  .problem-tags {
    gap: 4px;
  }

  .problem-title {
    font-size: 15px;
    margin-bottom: 8px;
  }
}
</style> 